<template>
  <div class="musicBox">
    <div style="display: flex;">
      <div :class="isPlaying?'imgBox rotate active':'imgBox rotate paused'" :style="{backgroundImage: 'url('+picUrl+')'}"></div>
      <div style="width: 110px;">
        <div class="senl">{{title}}</div>
        <div class="playPause">
          <span class="iconfont icon-diyiyeshouyeshangyishou icon" @click="prev"></span>
          <span class="iconfont icon-24gf-playCircle icon" @click="play" id="playPause"></span>
          <span class="iconfont icon-zuihouyiyemoyexiayishou icon" @click="next"></span>
        </div>
      </div>
      <audio :src="musicSrc" id="audioPlayer" loop autoplay></audio>
    </div>
    <div class="query">
      <input class="serchInp" type="text" name="" v-model="keyword" placeholder="搜索音乐" @keyup.enter="searchMusic" @blur="searchMusic">
    </div>
    <ul class="musicList">
      <div class="loding" hidden>
        loding...
      </div>
      <li v-for="(item,index) in musicList" @click="selectSong(item.id,item.name,index)">{{index+1}} &nbsp;&nbsp;{{item.name}}&nbsp;&nbsp;{{ item.artists[0].name }}</li>
    </ul>
    <div class="backBtn" @click="restart">
      重 置
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from "axios";
export default {
  name: "MusicBox",
  data() {
    return {
      initData: [
        {id: 1382838382, name: '飛行艇',artists: [{name:"King Gnu"}]},
        {id: 722013, name: '緋色月下、狂咲ノ絶',artists: [{name:"-1st Anniversary Remix-"}]},
        {id: 432486474, name: '妄想感傷代償連盟',artists: [{name:"DECO*27"}]},
        {id: 1836826327, name: 'ないない',artists: [{name:"ReoNa"}]},
        {id: 812400, name: 'PLANET',artists: [{name:"ラムジ"}]},
        {id: 1385738126, name: 'Teeth',artists: [{name:"5 Seconds of Summer"}]},
        {id: 520461943, name: '動く、動く',artists: [{name:"水瀬いのり"}]},
        {id: 33418857, name: 'LAST STARDUST',artists: [{name:"Aimer"}]},
        {id: 571330, name: 'LET IT OUT',artists: [{name:"福原美穂"}]},
        {id: 536623501, name: 'Ref:rain',artists: [{name:"Aimer"}]},
        {id: 27804706, name: '君とSOS',artists: [{name:"MOSHIMO"}]},
        {id: 28364367, name: '音偽バナシ',artists: [{name:"DECO*27"}]},
        {id: 1472480890, name: '群青',artists: [{name:"YOASOBI"}]},
        {id: 439911740, name: '赤い世界が消える頃',artists: [{name:"木戸衣吹"}]},
        {id: 1327809651, name: 'Defy',artists: [{name:"HoneyComeBear"}]},
      ],
      musicSrc: "",
      musicList: [],
      keyword: "",
      picUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6e7ed37b51b8e67c1a32681bb6a823200d8c29941239e-m3tZKA_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636679752&t=9aea215266dfade246e2aa08dfc67b4f",
      isPlaying: false,
      title: "未选择歌曲",
      index: 0
    }
  },
  methods: {
    // 歌曲搜索
    searchMusic: function(){
      $(".serchInp").blur()
      if(this.keyword == "" || this.keyword.trim()==""){
        return;
      }
      $(".loding").show()
      axios.get("https://enwayouli.top/search?keywords="+this.keyword)
        .then(res => {
          this.musicList = res.data.result.songs
          $(".loding").hide()
        })
        .catch(err => { })
    },
    // 播放按钮控制
    play: function(){
      if(this.musicSrc==""){
        return;
      }
      let audio = $("#audioPlayer")[0];
      if (audio.paused) {
        this.isPlaying = true
        audio.play();
        $("#playPause").removeClass("icon-24gf-playCircle")
        $("#playPause").addClass("icon-24gf-pauseCircle")
      } else {
        this.isPlaying = false
        audio.pause();
        $("#playPause").removeClass("icon-24gf-pauseCircle")
        $("#playPause").addClass("icon-24gf-playCircle")
      }
    },
    // 歌曲url,封面获取
    selectSong: function(songId,title,index){
      this.index = index
      this.title = title
      $('#audioPlayer')[0].play()
      axios.get("https://enwayouli.top/song/url?id="+songId).then(res => {
        if(res.data.data[0].url == "" || res.data.data[0].url == null){
          this.isPlaying = false
          this.title = "未找到资源"
          return;
        }
        this.musicSrc = res.data.data[0].url
        this.isPlaying = true
        $("#playPause").removeClass("icon-24gf-playCircle")
        $("#playPause").addClass("icon-24gf-pauseCircle")
        axios.get("https://enwayouli.top/song/detail?ids="+songId)
          .then(res => {
            this.picUrl = res.data.songs[0].al.picUrl
          })
      })
    },
    prev: function(){
      if(this.index==0){
        return;
      }
      this.index--;
      this.selectSong(this.musicList[this.index].id,this.musicList[this.index].name,this.index)
    },
    next: function(){
      if(this.index>=this.musicList.length-1){
        return;
      }
      this.index++;
      this.selectSong(this.musicList[this.index].id,this.musicList[this.index].name,this.index)
    },
    restart: function(){
      this.musicList = this.initData
    }
  },
  mounted() {
    this.musicList = this.initData
  },
}
</script>

<style scoped>
.musicBox{
  width: 200px;
  height: 300px;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px solid #dbdbdb;
}
.imgBox{
  background-repeat: no-repeat;
  background-size: cover;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 10px;
}
.serchInp{
  width: 192px;
  height: 22px;
  border-radius: 10px;
  border: 1px solid lightgray;
  outline: none;
  background: rgba(255, 255, 255, 0.5);
  text-indent: .5em;
  margin-left: 3px;
}
.musicList{
  list-style-type: none;
  padding: 0;
  height: 150px;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  margin: 0;
}

.musicList::-webkit-scrollbar{
  display:none;
}
.musicList>li{
  height: 21px;
  line-height: 21px;
  font-size: 12px;
  border-bottom: 1px solid #dbdbdb;
  width: 100%;
  overflow: hidden;
  background-color: #fafafa;
  color: #3a1826;
  display:-webkit-box;/*设置为弹性盒子*/
  overflow:hidden;/*超出隐藏*/
  text-overflow:ellipsis;/*显示省略号*/
  -webkit-line-clamp:1;/*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all;/*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
  cursor: pointer;
  text-indent: 0.5em;
}
.musicList>li:first-child{
  border-top: 1px solid #dbdbdb;
}
.musicList>li:nth-child(2n+1){
  background-color: white;
}

.musicList>li:hover{
  background-color: rgba(0, 0, 0,.6);
  color: white;
}
@keyframes startR {
  0%{
    transform: rotateZ(0rad);
  }
  100%{
    transform: rotateZ(360deg);
  }
}
.rotate{
  animation: startR 10s infinite linear forwards;
}
.senl{
  display:-webkit-box;/*设置为弹性盒子*/
  overflow:hidden;/*超出隐藏*/
  text-overflow:ellipsis;/*显示省略号*/
  -webkit-line-clamp:1;/*多少行后显示省略号，这里设置为第一行超出后显示省略号*/
  word-break:break-all;/*强制英文单词自动换行,可要可不要*/
  -webkit-box-orient: vertical; /* 从上到下垂直排列子元素*/
  font-size: 14px;
  font-weight: 600;
  padding: 5px;
  line-height: 25px;
}
.loding{
  text-align: center;
  line-height: 150px;
  width: 100%;
  height: 100%;
}
.playPause{
  height: 34px;
  display: flex;
}
.icon{
  flex: 1;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  font-size: 32px;
}
.query{
  margin-bottom: 10px;
}
.backBtn{
  text-align: center;
  font-size: 12px;
  height: 36px;
  line-height: 32px;
  font-weight: 600;
}
.backBtn:hover{
  background-color: rgba(0, 0, 0,.3);
  color: white;
}
.active {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
</style>e
